<template>
  <div ref="scrollContainer" class="flex-1 overflow-auto p-4 pb-[100px] bg-gray-50">
    <transition-group name="message-fade" tag="div">
      <div
        v-for="msg in messages"
        :key="msg.id"
        :class="[
          'mb-4 flex',
          isMine(msg) ? 'justify-end' : 'justify-start'
        ]"
      >
        <div
          :class="[
            'relative p-3 rounded-lg max-w-xs shadow-sm message-bubble',
            isMine(msg)
              ? 'bg-blue-500 text-white text-right mine'
              : 'bg-white text-gray-800 other'
          ]"
        >
          <div class="text-xs mb-1" :class="isMine(msg) ? 'text-blue-200' : 'text-gray-400'">
            {{ msg.from }} · {{ msg.time }}
          </div>
          <div>
            <span v-if="msg.type === 'text' || msg.type === 'emoji'">{{ msg.content }}</span>
            <a v-else-if="msg.type === 'file'" href="#" @click.prevent class="underline">📎 {{ msg.content }}</a>
          </div>
        </div>
      </div>
    </transition-group>
  </div>
</template>


<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import { defineProps } from 'vue'
import { getCurrentUser } from '@/utils/storage'
import type { Message } from '@/utils/mockData'
import { getMessages } from '@/utils/mockData'

const props = defineProps<{
  sessionId: number
  reloadKey: number
  filterKeyword: string
  filterTypes: string[]
}>()

const messages = ref<Message[]>([])
const scrollContainer = ref<HTMLElement | null>(null)

function isMine(msg: Message): boolean {
  return msg.from === getCurrentUser()?.nickname
}

function scrollToBottom() {
  nextTick(() => {
    if (scrollContainer.value) {
      scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight
    }
  })
}

function load() {
  let list = getMessages(props.sessionId)

  if (props.filterKeyword) {
    const keyword = props.filterKeyword.toLowerCase()
    list = list.filter(m => m.content.toLowerCase().includes(keyword))
  }

  if (props.filterTypes.length) {
    list = list.filter(m => props.filterTypes.includes(m.type))
  }

  messages.value = list
}

// 响应式监听：任何状态变更就加载并滚动
watch(
  () => [props.sessionId, props.reloadKey, props.filterKeyword, props.filterTypes],
  () => {
    load()
    scrollToBottom()
  },
  { immediate: true }
)

// 若 messages 内容本身有变也滚动（比如新消息添加）
watch(messages, scrollToBottom, { deep: true })
</script>

<style scoped>
.message-fade-enter-active, .message-fade-leave-active {
  transition: all 0.2s ease;
}
.message-fade-enter-from, .message-fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
.mine::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 12px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #3b82f6;
}
.other::after {
  content: '';
  position: absolute;
  left: -8px;
  top: 12px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #ffffff;
}
</style>
